<template>
	<div class="Topic">
		<div class="Topic-top">
			<div style="width: 100%;min-width: 400px;height: 40px;line-height: 40px;margin: 10px 0;">
				<input class="inp" v-model="KeyWord1" placeholder="请输入话题名称" @keyup.enter="add(KeyWord1)"/>
				<button type="button" @click="add(KeyWord1)"
					style="width: 70px;height: 100%;border: none;background-color: #5a309e;color: #fff;vertical-align: middle;">搜索话题</button>
			</div>
			<div style="display: inline;">
				<el-radio-group @change="add" style="overflow: hidden;height: 30px;margin: 20px 0;" v-model="radio1"
					fill="#59309f">
					<span>活动分类:</span>
					<el-radio-button label="全部"></el-radio-button>
					<el-radio-button :label="item.TId" v-for="(item,index) in Topic" :key="index">{{item.TName}}
					</el-radio-button>
				</el-radio-group>

				<el-radio-group @change="add2" style="overflow: hidden;height: 30px;" v-model="radio2" fill="#59309f">
					<span>上线时间:</span>
					<el-radio-button label="全部">全部</el-radio-button>
					<el-radio-button label="3">近3天</el-radio-button>
					<el-radio-button label="7">近7天</el-radio-button>
					<el-radio-button label="15">近15天</el-radio-button>
					<el-radio-button label="30">近30天</el-radio-button>
					<el-radio-button label="90">近90天</el-radio-button>
					<el-radio-button label="自定义">自定义</el-radio-button>
				</el-radio-group>
			</div>
		</div>

		<div class="Topic-con">
			<div v-if="KeyWord">

			</div>
			<div v-else>
				<el-tabs type="border-card" v-model="SortType" @tab-click="handleClick" fill="#59309f">
					<el-tab-pane label="浏览最多" name="1">
						<table class="table" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th colspan="4">话题信息</th>
								<th>浏览次数</th>
								<th>讨论次数</th>
								<th>点赞量</th>
								<th>收藏数</th>
								<th>分享数</th>
							</tr>
							<tr v-for="(item,index) in TopicList.ItemList" :key="index">
								<td colspan="4">
									<h4><router-link :to="'/Topicdetail/'+item.AutoId">{{item.Name}}</router-link></h4>
									<p
										style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 500px;color: #a2aec0;">
										简介: {{item.Description}}</p>
									<p style="color: #a2aec0;">上线时间: {{item.AddTime}}</p>
								</td>
								<td>{{item.ViewCount | moneyFormat}}</td>
								<td>{{item.DiscussCount|moneyFormat}}</td>
								<!-- <td>{{item.LikeCount}}</td> -->
								<td>{{item.AutoId}}</td>
								<td>{{item.FavCount}}</td>
								<td>{{item.ShareCount}}</td>
							</tr>
						</table>
					</el-tab-pane>
					<el-tab-pane label="讨论最多" name="2">
						<table class="table" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th colspan="4">话题信息</th>
								<th>浏览次数</th>
								<th>讨论次数</th>
								<th>点赞量</th>
								<th>收藏数</th>
								<th>分享数</th>
							</tr>
							<tr v-for="(item,index) in TopicList.ItemList" :key="index">
								<td colspan="4">
									<h4>{{item.Name}}</h4>
									<p
										style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 500px;color: #a2aec0;">
										简介: {{item.Description}}</p>
									<p style="color: #a2aec0;">上线时间: {{item.AddTime}}</p>
								</td>
								<td>{{item.ViewCount | moneyFormat}}</td>
								<td>{{item.DiscussCount|moneyFormat}}</td>
								<td>{{item.LikeCount}}</td>
								<td>{{item.FavCount}}</td>
								<td>{{item.ShareCount}}</td>
							</tr>
						</table>
					</el-tab-pane>
					<el-tab-pane label="最新活动" name="3">
						<table class="table" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th colspan="4">话题信息</th>
								<th>浏览次数</th>
								<th>讨论次数</th>
								<th>点赞量</th>
								<th>收藏数</th>
								<th>分享数</th>
							</tr>
							<tr v-for="(item,index) in TopicList.ItemList" :key="index">
								<td colspan="4">
									<h4>{{item.Name}}</h4>
									<p
										style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 500px;color: #a2aec0;">
										简介: {{item.Description}}</p>
									<p style="color: #a2aec0;">上线时间: {{item.AddTime}}</p>
								</td>
								<td>{{item.ViewCount | moneyFormat}}</td>
								<td>{{item.DiscussCount|moneyFormat}}</td>
								<td>{{item.LikeCount}}</td>
								<td>{{item.FavCount}}</td>
								<td>{{item.ShareCount}}</td>
							</tr>
						</table>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div style="width: 100%;text-align: center;padding: 40px 0;background-color: #fff;color: #bec4d3;">
				<p>当前版本仅<span style="color: red;">3</span>个结果,升级更高版本<span style="color: #396ffe;">查看更多</span></p>
			</div>
		</div>
	</div>
</template>

<script>
	// import moment from 'moment';
	import {
		GetTopic,
		GetTopicList
	} from '@/api/intelbras.js'
	export default {
		data() {
			return {
				radio1: '全部',
				radio2: '全部',
				Topic: [],
				TopicList: [],
				arg: '',
				SortType: '1',
				TagId: '',
				KeyWord: '',
				KeyWord1: '',
			};
		},
		created() {
			this.getTopic()
			this.handleClick()
			this.add2()
		},
		methods: {
			handleClick() {
				GetTopicList({
						DayStep: 0,
						KeyWord: this.KeyWord,
						SortType: this.SortType,
						pageindex: 1,
						pagesize: 10,
					})
					.then(res => {
						this.TopicList = res.data.Data
						console.log(this.TopicList, '1456464')
					})
					.catch(err => console.log(err))
			},
			getTopic() {
				GetTopic()
					.then(res => {
						this.Topic = res.data.Data
						console.log(this.Topic);
					})
					.catch(err => console.log(err))
			},
			add(e) {
				GetTopicList({
						DayStep: 0,
						KeyWord: e,
						SortType: this.SortType,
						pageindex: 1,
						pagesize: 10,
						TagId: e
					})
					.then(res => {
						this.TopicList = res.data.Data
						console.log(this.TopicList, '123')
						// let strUp = this.TopicList.ItemList[0].UpdateTime; //结束时间
						// let str = strUp.substring(0, 10); //结束转类型时间
						// let strFirst = this.TopicList.ItemList[0].FirstDateCode //开始时间
						// // let dif = str*1 - strFirst*1
						// this.$moment(strFirst).format('YYYY-MM-DD');
						// console.log("截取后结束时间", str, "开始时间", strFirst);
					})
					.catch(err => console.log(err))
			},
			add2(event) {
				if(event==3){
					this.fun(3)
				}else if(event==5){
					this.fun(5)
				}else if(event==7){
					this.fun(7)
				}else if(event==15){
					this.fun(15)
				}else if(event==30){
					this.fun(30)
				}else if(event==90){
					this.fun(90)
				}
			},
			fun(index){
				GetTopicList({
						KeyWord: this.KeyWord,
						r: 0.4406815202903609,
						DayStep: index,
						SortType: 1,
						pageindex: 1,
						pagesize: 10
					})
					.then(res => {
						this.TopicList = res.data.Data
						// console.log(this.TopicList, '123')
					})
					.catch(err => console.log(err))
			}
		},
		filters: {
			//取截单元,单位
			moneyFormat: function(arg) {
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 2) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				}

			}
		}
	}
</script>

<style>
	.Topic .el-radio-button {
		border-radius: 2px;
		display: inline-block;
		padding: 3px 10px 4px 10px !important;

	}

	.Topic .el-tabs--border-card>.el-tabs__content {
		box-shadow: none !important;
	}

	.Topic .el-radio-button__inner {
		padding: 6px 12px !important;
		border: none;
	}

	.Topic .el-radio-group span {
		height: 30px;
		display: inline-block;
		vertical-align: inherit;
		font-size: 16px;
		font-weight: 500;
	}

	.Topic {
		background-color: #f1f4ef;
	}

	.Topic .table {
		width: 100%;
		min-width: 1250px;
	}

	.Topic td {
		border-bottom: 1px solid #eee;
	}

	.Topic .table:first-child tr {
		background-color: #f7f8fa;

	}

	.Topic .table:first-child tr th:first-child {
		padding-left: 20px;
		text-align: start;
	}

	.Topic .table tr:not(:first-child) td {
		padding: 10px 0;
		line-height: 1.6;
		background-color: #fff;
	}

	.Topic .table tr:not(:first-child) td:first-child {
		padding-left: 20px;
	}

	.Topic .table tr:not(:first-child) td:not(:first-child) {
		text-align: center;
	}

	.Topic .table th {
		width: 140px;
		height: 40px;
	}

	.Topic-top {
		background-color: #ffffff;
		padding: 30px;
		margin-bottom: 20px;
	}

	.Topic .inp {
		height: 100%;
		width: 40%;
		text-indent: 10px;
		vertical-align: middle;
		outline: #59309f;
	}
</style>
